<template>
  <div class="modal-dialog">
    <el-dialog
      v-model="props.visible"
      :title="props.title"
      :width="props.width"
      draggable
      center
      destroy-on-close
      :before-close="onBeforeClose"
    >
      <slot />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  visible: { type: Boolean, default: false },
  title: { type: String, default: 'Title' },
  width: { type: String, default: '30%' },
});

const emit = defineEmits(['before-close']);

// 向父组件传事件
const onBeforeClose = () => {
  emit('before-close');
};

</script>

<style lang="scss">
.modal-dialog {
  .el-select .el-input {
    width: 290px;
  }

  .el-dialog--center .el-dialog__body {
    padding: 15px calc(var(--el-dialog-padding-primary)) 5px;
  }

  .el-dialog.is-draggable .el-dialog__header {
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-right: 0;
  }
}
</style>
